// 引入Three.js
import * as THREE from 'three';
// 引入Three.js扩展库
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

import { CSS2LabelRenderer } from './CSS2DRenderer.js'

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

/**
 * 创建场景对象Scene
 */
var scene = new THREE.Scene();
/**
 * 创建网格模型
 */
// var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
// var material = new THREE.MeshLambertMaterial({
//     color: 0x0000ff
// }); //材质对象Material
// var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
// scene.add(mesh); //网格模型添加到场景中

var mesh = null;
var loader = new GLTFLoader();
loader.load('./four.glb', function (gltf) {
    scene.add(gltf.scene);
    mesh = gltf.scene.getObjectByName( "two" );
})
/**
 * 光源设置
 */
//点光源
var point = new THREE.PointLight(0xf0f0f0); // 将颜色改为白色
point.position.set(200, 100, 100); //点光源位置
scene.add(point); //点光源添加到场景中

//环境光
var ambient = new THREE.AmbientLight(0xf0f0f0); // 将颜色改为白色
scene.add(ambient);

/**
 * 相机设置
 */
var width = window.innerWidth*0.83; //canvas画布宽度
var height = window.innerHeight/2.65; //canvas画布高度
var k = width / height; //canvas画布宽高比
var s = 50; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 500);
camera.position.set(20, 30, 20); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xffffff, 0.5); // 设置背景颜色为白色

document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

// 自动旋转
// 自动旋转
function animate() {
    requestAnimationFrame(animate);
    // 整个场景旋转
    scene.rotation.z += 0.01; 
    // 如果存在模型，则单独旋转模型
    //if (mesh) {
   //     mesh.rotation.y += 0.01; // 单独旋转模型
    //}
}
animate();

// 渲染函数
function render() {
    renderer.render(scene, camera);//执行渲染操作
    CSS2LabelRenderer.render(scene, camera);//执行渲染HTML标签
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();

//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
new OrbitControls(camera, renderer.domElement);

//辅助线
// var axesHelper = new THREE.AxesHelper(300);
// scene.add(axesHelper);
export { renderer, scene, mesh };